<template>
  <view class="level-select-container">
    <view class="header">
      <text class="title">选择关卡</text>
      <button class="back-btn" @click="$emit('back')">
        <text class="icon">←</text> 返回难度
      </button>
    </view>
    
    <view class="level-grid">
      <button 
        v-for="i in 15" 
        :key="i"
        class="level-btn"
        :class="{
          'locked': i > unlockedLevel,
          'unlocked': i <= unlockedLevel && i !== currentLevel,
          'current': i === currentLevel
        }"
        @click="handleLevelClick(i)"
        :disabled="i > unlockedLevel"
      >
        <text>{{ i }}</text>
      </button>
    </view>
    
    <button 
      class="start-btn" 
      @click="$emit('start')"
      :disabled="currentLevel > unlockedLevel"
    >
      开始游戏
    </button>
  </view>
</template>

<script setup>
import { defineProps, emit } from 'vue'
import { useGameStore } from '@/store/game'

const gameStore = useGameStore()

const props = defineProps({
  difficulty: {
    type: String,
    required: true
  }
})

const emits = defineEmits(['back', 'start'])

const currentLevel = gameStore.currentLevel
const unlockedLevel = gameStore.unlockedLevels[props.difficulty] || 1

const handleLevelClick = (level) => {
  if (level <= unlockedLevel) {
    gameStore.currentLevel = level
  }
}
</script>

<style scoped>
.level-select-container {
  padding: 24rpx;
  background-color: #1a1a2e;
  min-height: 100vh;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 32rpx;
}

.title {
  font-size: 36rpx;
  font-weight: bold;
  color: #fff;
}

.back-btn {
  background-color: #333;
  color: #fff;
  padding: 8rpx 16rpx;
  border-radius: 8rpx;
  font-size: 28rpx;
  display: flex;
  align-items: center;
}

.icon {
  margin-right: 8rpx;
}

.level-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16rpx;
  margin-bottom: 32rpx;
}

.level-btn {
  width: 100rpx;
  height: 100rpx;
  border-radius: 12rpx;
  font-size: 32rpx;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
}

.level-btn.locked {
  background-color: #333;
  color: #666;
  border: 2rpx solid #444;
}

.level-btn.unlocked {
  background-color: #2d3436;
  color: #fff;
  border: 2rpx solid #6C5CE7;
}

.level-btn.current {
  background-color: #6C5CE7;
  color: #fff;
  border: 2rpx solid #8a7cf5;
}

.start-btn {
  width: 100%;
  background-color: #6C5CE7;
  color: #fff;
  padding: 20rpx;
  border-radius: 8rpx;
  font-size: 32rpx;
  font-weight: bold;
  margin-top: 24rpx;
}

.start-btn:disabled {
  background-color: #444;
  opacity: 0.7;
}
</style>